<template>
  <div>
    <el-row :gutter="40">
      <el-col :span="12">
        <el-button @click="handleNodeClick(0,'',-1)">新增</el-button>
        <hr>
        <el-tree
            :data="data"
            :props="defaultProps"
        >
          <span style="width: 100%" slot-scope="{ data}">
            <span>{{ data.name }}</span>
            <span
                v-if="data.level!==3"
                style="float: right"
                @click="handleNodeClick(data.id,data.name,data.level)"
            ><i class="el-icon-plus"></i
            ></span>
            <span
                style="float: right"
            ><i class="el-icon-edit" @click="handleNodeClick(data.id,data.name)"></i
            ></span>
            <span
                v-if="!data.children || data.children.length===0"
                style="float: right"
            ><i class="el-icon-delete" @click="toDelete(data.id)"></i
            ></span>
          </span>
        </el-tree>
      </el-col>
      <el-col :span="12">
        <el-form label-width="100px" label-position="left" ref="postForm" :model="postData" :rules="postRules">
          <el-form-item v-show="parentName!==''" label="父级地区" prop="name">
            {{parentName}}
          </el-form-item>
          <el-form-item label="地区名称" prop="name">
            <el-input v-model="postData.name"></el-input>
          </el-form-item>
        </el-form>
        <el-button v-if="!this.opId" type="primary" @click="submit">新 增</el-button>
        <el-button v-else type="primary" @click="edit">更 新</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { _getList, _post, _delete, _put } from './store'

export default {
  name: 'areaManage',
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      opId: 0,
      postData: {
        name: '',
        level: 0,
        parentId: 0
      },
      parentName: '',
      postRules: {
        name: [{ required: true, message: '请输入地区名字', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.postForm.validate(async(valid) => {
        if (valid) {
          const { success, message } = await _post(this.postData)
          if (success) {
            this.$message({ type: 'success', message: '操作成功' })
            this.postData.name = ''
            this.initData()
          } else {
            this.$message({ type: 'error', message })
          }
        }
      })
    },
    edit() {
      this.$refs.postForm.validate(async(valid) => {
        if (valid) {
          const { success, message } = await _put({ ...this.postData, id: this.opId })
          if (success) {
            this.$message({ type: 'success', message: '操作成功' })
            this.postData.name = ''
            this.initData()
          } else {
            this.$message({ type: 'error', message })
          }
        }
      })
    },
    handleNodeClick(id, name, level) {
      this.$refs.postForm && this.$refs.postForm.resetFields()
      if (level === undefined) {
        this.opId = id
        this.postData.name = name
        this.postData.parentId = 0
        this.postData.level = 0
        this.parentName = ''
      } else {
        this.parentName = name
        this.postData.parentId = id
        this.postData.level = level + 1
        this.opId = 0
      }
    },
    async initData() {
      const { data, success, message } = await _getList()
      if (success) {
        this.data = data
      } else {
        this.$message({ type: 'error', message })
      }
    },
    toDelete(id) {
      this.$confirm("你确认要删除此?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async() => {
        const { success, message } = await _delete(id)
        if (success) {
          this.$message({ type: "success", message: "删除成功" })
          this.initData()
        } else {
          this.$message({ type: "error", message })
        }
      })
    }
  },
  mounted() {
    this.initData()
  }
}
</script>

<style scoped>

</style>
